<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/index.css" rel="stylesheet" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/vant.min.js"></script>
		<script src="../js/new_file.js"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
				plus.navigator.setStatusBarBackground('#FF0000');
			});
		</script>
		<script src="../js/fanhui.js"></script>
		<style>
			html,body{
			height: 100%;
			width: 100%px;
		}
		#app{
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
		}
		section{
			flex: 1;
			overflow-y: scroll;
		}
		.foot{
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		
		.a{
			width: 85px;
		}
	.non{
		display: none;
	}
	</style>
	</head>
	<body>
		<div id="app">
			<header class="head">
				<van-search v-model="value" placeholder="请输入搜索关键词" show-action background="red">
					<div slot="action" style="padding-top: 5px;">
						<van-icon size="25px" color="white" name="chat-o"></van-icon>
					</div>
				</van-search>
			</header>
			<section>
				<van-row>
					<van-col span="5">
						<van-badge-group :active-key="activeKey" @change="onChange">
							<p id="a1">
								<van-badge title="手机" class="a" />

							</p>
							<p id="a2">
								<van-badge title="酒水饮料" class="a" />
							</p>
							<p id="a3">
								<van-badge title="厨房用品" class="a" />
							</p>
							<p id="a4">
								<van-badge title="红酒" class="a" />
							</p>
							<p id="a5">
								<van-badge title="日用百货" class="a" />
							</p>
						</van-badge-group>
					</van-col>
					<van-col span="19">
						<!-- 手机 -->
						<div id="b1">
							<div>
								<van-row>
									<van-col span="12">
										<div><img src="../img/1.jpg" style="width: 100%;" /></div>
										<div>
											手机
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.01</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>手机2</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.01</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12">
										<div><img src="../img/1.jpg" style="width: 100%;" /></div>
										<div>
											手机
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.01</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									
								</van-row>
							</div>
						</div>
						<!-- 酒水饮料-->
						<div id="b2" class="non">
							<div>
								<van-row>
									<van-col span="12">
										<div><img src="../img/shopping_default_4.jpg" style="width: 100%;" /></div>
										<div>
											酒水饮料
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.02</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											酒水饮料2
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.03</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											酒水饮料
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.02</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									
								</van-row>
							</div>
						</div>
						<!-- 厨房用品 -->
						<div id="b3" class="non">
							<div>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											美的微波炉多功能智能平板
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">399</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>家用手套</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">19</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											同福祥五层钢王砂锅
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">1280</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									
								</van-row>
							</div>
						</div>
						<!-- 红酒 -->
						<div id="b4" class="non">
							<div>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											红酒
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.04</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									<van-col span="12">
										<div><img src="../img/shopping_default_3.jpg" style="width: 100%;" /></div>
										<div>红酒2</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.01</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											红酒3
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.04</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									
								</van-row>
							</div>
							<!-- 日用百货 -->
						<div id="b5" class="non">
							<div>
								<van-row>
									<van-col span="12">
										<div><img src="../img/4.jpg" style="width: 100%;" /></div>
										<div>
											日用百货
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.05</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>日用百货1</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.01</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
								</van-row>
								<van-row>
									<van-col span="12">
										<div><img src="../img/product_default.jpg" style="width: 100%;" /></div>
										<div>
											日用百货2
										</div>
										<div style="color: red;">￥ <span style="font-size: 22px;">0.05</span></div>
										<div style="color: #C0C0C0; font-size: 14px;">13 销量</div>
										<div style="color: #C0C0C0; font-size: 14px;">13456 次浏览</div>
									</van-col>
									
								</van-row>
							</div>
							
						</div>
					</van-col>
				</van-row>

			</section>
			




		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					value: "",
					activeKey: 0,
					active: 0

				},
				methods: {
					onChange(key) {
						this.activeKey = key;
					}
				}


			})
			$(function(){
				$("#a1").click(function(){
					$("#b1").siblings().addClass("non");
					$("#b1").removeClass("non");
				});
				$("#a2").click(function(){
					$("#b2").siblings().addClass("non");
					$("#b2").removeClass("non");
				});
				$("#a3").click(function(){
					$("#b3").siblings().addClass("non");
					$("#b3").removeClass("non");
				});
				$("#a4").click(function(){
					$("#b4").siblings().addClass("non");
					$("#b4").removeClass("non");
				});
				$("#a5").click(function(){
					$("#b5").siblings().addClass("non");
					$("#b5").removeClass("non");
				});
			});
		</script>
	</body>
</html>
